<!DOCTYPE html>
<html lang="cn" window-frame="solid-with-shadow" window-icon="../images/icon/icon.ico">
<head>
    <meta charset="UTF-8">
    <title>BS Redis Desktop Client</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        @import "../css/define.css";
        html, body {
            width: 100%;
            height: 100%;
            background: #fff;
        }

        .form {
            margin: 15px;
            flow: vertical;
            vertical-align: top;
        }

        .form .row {
            width: 100%;
            flow: horizontal;
            padding: 5px 0;
        }

        .form .row .t {
            width: 70px;
            text-align: right;
            padding: 3px 10px 3px 0;
        }

        .form .row .i {
            size: *;
            flow: horizontal;
            vertical-align: middle;
            horizontal-align: left;
        }

        .form .row .i input, .form .row .i select {
            size: *;
            padding: 5px 6px;
        }

        .form .row .i select option {
            padding: 4px 6px;
            cursor: pointer;
        }

        .form .row .i select option:hover {
            background: @background;
            color: #1e1e1e;
        }
    </style>
</head>
<body>
<div styleset="#title-bar" role="window-caption">
    <div class="title-bar-title">
        <img class="app-icon" src="../images/icon/app.png" height="16px"/>
        <span class="app-name"></span>
    </div>
    <div class="title-bar-action">
        <button class="btn exit" id="exit"></button>
    </div>
</div>
<div id="form"></div>
<script type="module">
    import tools from "../js/tools"

    const view = tools.getView()
    const parameters = tools.getParameters()
    document.$(".app-name").innerText = parameters.title
    document.on("click", "#exit", () => {
        view.close("close")
    })

    class Form extends Element {
        constructor() {
            super()
        }

        render() {
            return <div class="form">
                <div class="row">
                    <div class="t">
                        hash键
                    </div>
                    <div class="i">
                        <input type="text" value={parameters.key}
                               disabled="disabled"/>
                    </div>
                </div>
                <div class="row">
                    <div class="t">
                        字段
                    </div>
                    <div class="i">
                        <input type="text"
                               onChange={(...args) => this.fieldChange(...args)}
                               placeholder={"请输入字段"}/>
                    </div>
                </div>
                <div class="row">
                    <div class="t">
                        值
                    </div>
                    <div class="i">
                        <input type="text"
                               onChange={(...args) => this.valueChange(...args)}
                               placeholder={"请输入值"}/>
                    </div>
                </div>
                <div class="row" style="margin-top:10px">
                    <div class="t"></div>
                    <div class="i">
                        <button class="btn btn-primary" onClick={() => this.ok()}>提交</button>
                        <button class="btn btn-primary" onClick={() => this.cancel()} style="margin-left:10px">取消
                        </button>
                    </div>
                </div>
            </div>
        }

        form = {
            value: "",
            field: "1"
        }

        fieldChange(evt, ele) {
            this.form.field = ele.value
        }

        valueChange(evt, ele) {
            this.form.value = ele.value
        }

        ok() {
            if (!this.form.value) {
                tools.alert("请输入值!")
                return
            }
            if (!this.form.field) {
                tools.alert("请输入字段!")
                return
            }
            const save = () => {
                if (parameters.view.xcall("append_hash_data", parameters.key, this.form.field, this.form.value) === true) {
                    tools.alert("插入成功")
                        .then(() => {
                            view.close(true)
                        })
                } else {
                    tools.alert("插入失败")
                }
            }
            // 判断key是否存在
            parameters.view.xcall("async_hash_field_exist", parameters.key, this.form.field, value => {
                if (value) {
                    return tools.confirm("字段已经存在。是否继续？注意：继续将覆盖原有键值。")
                        .then(res => {
                            if (res === true) {
                                save()
                            }
                        })
                }
                save()
            })

        }

        cancel() {
            view.close("close")
        }
    }

    document.$("#form").patch(<Form/>)
</script>
</body>
</html>